<template>
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <v_menu :title="data.title" :site="site"></v_menu>

    <!--错别字校对-->
    <Row :gutter="16" class="wrapper">
      <i-col span="19" class="content">
        <uploading
          @returnTitle="returnTitle"
          @returnKeyword="returnKeyword"
          @returnAbstract="returnAbstract"
          @returnLiterature="returnLiterature"
          @returnMainBody="returnMainBody"
          @write="write"
          v-show="uploading"
        ></uploading>

        <fillIn
          v-if="title"
          v-show="fillIn"
          :title="title"
          :keyword="keyword"
          :abstract="abstract"
          :literature="literature"
          :mainBody="mainBody"
          @returnMainBody="returnMainBody"
        ></fillIn>


      </i-col>
      <i-col span="5" class="navigation">
        <ngn :data="data"></ngn>
      </i-col>
    </Row>

    <Modal v-model="modal1" width="650px">
      <div slot="header" class="header">错别字校对</div>
      <div>
        <span v-html="value" style="font-weight: bold;font-size: 14px;display: inline-block"></span>
      </div>
      <div slot="footer"></div>
    </Modal>

    <div class="wrongWords" v-show="fillIn">
      <Button type="info" class="btn0" @click="toExamine">我要校对</Button>
    </div>
  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import fillIn from '../module/fillIn'
  import v_menu from '../module/menu'
  import ngn from '../module/ngn'
  import uploading from '../module/uploading'

  export default {
    components: {carousel, fillIn, v_menu, ngn, uploading},
    data() {
      return {
        /*轮播*/
        autoplaySpeed: 100000,
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        /*导航*/
        site: '错别字',
        data: {
          title: '论文投稿',
          list: [
            {list: '投稿流程', link: '/contributeProcess'},
            {list: '投稿指南', link: '/contributeGuide'},
          ]
        },
        /*错别字校对*/
        value: '',
        consequence: '',
        /**/
        modal1: false,

        uploading: true,
        fillIn: false,

        title: '',
        keyword: '',
        abstract: '',
        literature: '',
        mainBody: '',
      }
    },
    mounted() {
      window.scrollTo(0, 0);
    },
    methods: {
      write(data) {
        if (data == true) {
          this.fillIn = data;
          this.uploading = !data
        }
        if (data == false) {
          this.fillIn = !data;
          this.uploading = data;
          this.title = ' '
        }
      },
      returnTitle(data) {
        this.title = data;
      },
      returnKeyword(data) {
        this.keyword = data;
      },
      returnAbstract(data) {
        this.abstract = data;
      },
      returnLiterature(data) {
        this.literature = data;
      },
      returnMainBody(data) {
        this.value = data;
        this.mainBody = data;
      },

      /*错别字校对*/
      toExamine() {
        if (this.value) {
          let data = {
            param: this.value
          };
          this.$axios({
            method: 'POST',
            headers: {'Content-Type': 'application/json;charset=UTF-8'},
            data: JSON.stringify(data),
            url: this.$api.url + '/thesis/ProofreadForTypos',
          }).then((res) => {
            if (res.data.code == 200) {
              this.modal1 = true;
              for (let a of res.data.data) {
                if (this.value.indexOf(a[0]) != -1) {
                  let values = this.value.split(a[0]);
                  this.value = values.join('<font  style="color:#FF3300">' + a[0] + '</font >');
                }
              }
            }
          });
        }
      },
    }
  }
</script>

<style scoped>
  /*主要内容*/
  .wrapper .content {
    border-right: 1px solid #ccc;
    min-height: 300px;
    padding-top: 20px;
  }

  .wrapper .navigation {
    padding-left: 0 !important;
  }

  .wrapper .content .steps {
    position: relative;
    left: 100px;
  }

  .wrongWords {
    text-align: center;
    margin: 20px 0;
  }

  .wrongWords .btn0 {
    background: #d71619;
    border-color: #d71619;
  }

  .wrongWords .btn1 {
    background: #2b369f;
    border-color: #2b369f;
  }
</style>
<style>
  .ivu-modal .ivu-modal-content .ivu-modal-header {
    background: #2b369f;
    color: #fff;
  }

  .ivu-steps-horizontal .ivu-steps-content {
    font-weight: bold;
    font-size: 16px;
    padding: 10px 0;
    position: relative;
    right: 25px;
  }

  .ivu-steps .ivu-steps-head-inner {
    margin-right: 0;
  }

  .ivu-modal-close .ivu-icon-ios-close {
    color: #fff;
  }

  .ivu-modal-footer {
    border-top: none;
    padding: 0;
  }

  .ivu-modal-body {
    height: 500px;
    overflow: auto;
  }
</style>
